<template>
  <div class="sele" @click.stop="changeSelect">
    <div class="txt" :class="isShow ? 'active' : ''">
      <p class="van-ellipsis">{{ selectData.checked.tit }}</p>
      <i class="jt el-icon-caret-bottom"></i>
    </div>
    <keep-alive>
      <transition name="el-zoom-in-top"
        >>
        <ul class="info" ref="seleUl" v-show="isShow">
          <li
            v-for="(item, index) in selectData.option"
            :key="index"
            @click.stop="handleChange(item)"
            :class="
              selectData.checked.namePath == item.namePath ? 'active' : ''
            "
          >
            {{ item.tit }}
          </li>
        </ul>
      </transition>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: "selectDown",
  props: {
    index: {
      type: Number,
      default: null,
    },
    selectData: {
      type: Object,
      default: () => {
        return {
          checked: {
            type: Object,
            default: () => {
              return {};
            },
          },
          option: {
            type: Array,
            default: () => {
              return [];
            },
          },
        };
      },
    },
  },
  data: () => {
    return {
      isShow: false,
    };
  },
  computed: {},
  mounted: function() {
    document.addEventListener("mouseup", (e) => {
      this.isShow = false
    });
  },
  methods: {
    changeSelect: function() {
      this.isShow = !this.isShow;
    },
    handleChange: function(item, index) {
      this.$emit("handleChange", item, this.index);
      this.selectData.checked.namePath = item.namePath;
    },
  },
};
</script>
<style lang="scss" scoped>
.sele {
  width: 80px;
  height: 70px;
  .txt {
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      .jt {
        transform: rotate(180deg);
        transform-origin: center;
      }
    }
  }
}
.info {
  box-sizing: border-box;
  background: #1e1f24;
  width: 100px;
  margin-left: -10px;
  border: 1px solid #cc7029;
  li {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    color: #8a8f99;
    padding-left: 10px;
    border-top: 1px solid rgba(204, 112, 41, 0.5);
    cursor: pointer;
    &:hover {
      color: #fff;
    }
    &.active {
      color: #cc7029;
    }
  }
}
</style>
